<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    请求输入城市 ： <input type="text" class="myinput" name="" id=""><button class="btn">确定</button>
    <ul>

    </ul>
    <script>
        let myinput = document.querySelector(".myinput");
        let btn = document.querySelector(".btn");
        btn.onclick = function () {
            let val = myinput.value;
            console.log(val);
            // 发送jsonp请求
            // https://query.asilu.com/weather/baidu?city=%E6%AD%A6%E6%B1%89&callback=jsonp_0
            let s = document.createElement("script");
            s.src = `https://query.asilu.com/weather/baidu?city=${val}&callback=jsonp_0`
            document.head.appendChild(s);
        }

        function jsonp_0(res) {
            console.log(res);
            let {weather} = res;
            renderDom(weather);
        }

        /* 
        0
: 
{date: '18日（今天）', weather: '多云转小雨', icon1: '01', icon2: '07', temp: '27/18℃', …}
1
: 
{date: '19日（明天）', weather: '中雨转多云', icon1: '08', icon2: '01', temp: '23/14℃', …}
2
: 
{date: '20日（后天）', weather: '多云', icon1: '01', icon2: '01', temp: '22/15℃', …}
3
: 
{date: '21日（周日）', weather: '小雨', icon1: '07', icon2: '07', temp: '22/13℃', …}
4
: 
{date: '22日（周一）', weather: '阴转多云', icon1: '02', icon2: '01', temp: '23/18℃', …}
5
: 
{date: '23日（周二）', weather: '多云', icon1: '01', icon2: '01', temp: '26/16℃', …}
6
: 
{date: '24日（周三）', weather: '多云', icon1: '01', icon2: '01', temp: '24/18
        
        
        */
        function renderDom(data) {
            let ulEle = document.querySelector("ul");
            ulEle.innerHTML = "";
            data.forEach(item=>{
                let liEle = document.createElement("li");
                liEle.innerHTML = `日期是：${item.date};天气是${item.weather};温度是${item.temp}`;
                ulEle.appendChild(liEle);
            })
        }





    </script>
</body>

</html>